<template>
  <div class="content_box">
    <div class="main-box">
      <p class="main-title">缴费管理</p>

      <!-- 搜索 -->
      <search-component :search-options="searchOptions" :params="params" @search="onSearch"
        @reset="onReset"></search-component>

      <!-- 切换 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :name="'first'+index" v-for="(item,index) in tabList" :key="index">
          <template #label>
            <span>{{item.name}}
              <span v-if="tabListIndex == index" style="color: red; font-size: 12px">({{total}}笔)</span></span>
          </template>
        </el-tab-pane>
        
      </el-tabs>

      <!-- 列表 -->
      <el-table v-loading="loading" size="1100" :data="tableData">
        <el-table-column class="aaaa" label="案件信息" min-width="450">
          <template #default="scope">
            <div class="ces_box">
              <div class="code">
                <p>案件编号 {{scope.row.bail.case_code}}<img @click="copyCode(scope.row.bail.case_code)" src="@/assets/copy.png" alt="" /></p>
                <p>案件生成时间 {{scope.row.createtime}}</p>
              </div>
              <!-- <p class="up_day">最近更新时间：2天前 </p> -->
            </div>
            <div class="list">
              <div class="aj_msg">
                <p class="jiao">缴<span class="new" v-if="scope.row.is_new">新</span></p>
                <div class="name">
                  <!-- <p class="text">案件编号：{{scope.row.bail.crime_name}}</p> -->
                  <p class="title">案件名称：{{scope.row.bail.case_title}}</p>
                  <p class="text">嫌疑人：{{scope.row.bail.crime_name}}</p>
                  <p class="text"><span style="margin-right:20px;">起算日期：{{scope.row.bail.start_date}}</span><span>起算日期：{{scope.row.bail.end_date}}</span></p>
                  <div class="label">
                    <el-tag style="margin-right: 8px">待办取保</el-tag>
                    <el-tag>缴费中</el-tag>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="缴费状态" sortable min-width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 0" type="warning">待缴费</el-tag>
            <el-tag v-if="scope.row.status == 8" type="primary">缴费中</el-tag>
            <el-tag v-if="scope.row.status == 1" type="success">已缴费</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="amount_alias" label="保证金金额" min-width="130">
          <template #header>
            <div style="display: flex;align-items: center;">
              <p style="margin-right:6px">保证金金额</p>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="我是提示"
                placement="top-start"
              >
              <svg-icon name="wenhao" width="14px" height="14px"></svg-icon>
              </el-tooltip>
            </div>
          </template>
          <template #default="scope">
            <p style="color:#44567C">{{scope.row.amount_alias}}</p>
          </template>
        </el-table-column>
        <el-table-column label="主办单位 " min-width="200">
          <template #default="scope">
            <p style="color:#44567C">{{scope.row.department.name}}</p>
            <p style="color:#44567C">办案人员：{{scope.row.baar_xm}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createtime" label="缴费申请时间" min-width="130">
          <template #default="scope">
            <p style="color:#44567C">{{scope.row.createtime}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="finish_time" label="完成缴费时间 " min-width="180" sortable>
          <template #default="scope">
            <p style="color:#44567C">{{scope.row.finish_time?scope.row.finish_time:'--'}}</p>
          </template>
          
        </el-table-column>
        <el-table-column label="操作" min-width="350" align="right" fixed="right">
          <template #default="scope">

            <el-button v-if="scope.row.is_view_exception" style="margin-bottom:10px;" @click="warningClick" size="mini"
                    type="danger">
              <el-icon class="el-icon--right">
                <Warning />
              </el-icon>
              <span>查看异常</span>
            </el-button>

            <el-button style="margin-bottom:10px;" v-if="scope.row.is_pay" size="mini" type="primary" @click="openJf(scope.row.id)">发起缴费</el-button>
            <el-button style="margin-bottom:10px;" size="mini" type="primary" @click="toSee(scope.row.id)">查看</el-button>
            <el-button style="margin-bottom:10px;" v-if="scope.row.is_qrcode" size="mini" type="primary" @click="generateEwm(scope.row.id)">生成二维码</el-button>
            
     
            <el-dropdown @click="handleCommand" placement="bottom-end" @visible-change="openButton(scope.row)" style="margin-left:12px" trigger="click">
              <el-button type="primary">
                更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu :split-button="false">
                  <!-- v-if="anniuStatus.apply_bail_delay" -->
                  <el-dropdown-item @click="downClick(1,scope.row.id,scope.row.bail_id)"  divided>案件延期申请</el-dropdown-item>
                  <el-dropdown-item @click="downClick(2,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.update_origin_attr" divided>更新原始凭证</el-dropdown-item>
                  <el-dropdown-item @click="downClick(4,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.save_bail_date" divided>修改办案日期</el-dropdown-item>
                  <el-dropdown-item @click="downClick(5,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.entrust" divided>委托协办单位</el-dropdown-item>
                  <el-dropdown-item @click="downClick(6,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.save_bail_bank" divided>修改办案预留银行卡</el-dropdown-item>
                  <el-dropdown-item @click="downClick(7,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.update_department" divided>修改办案单位</el-dropdown-item>
                  <el-dropdown-item @click="downClick(8,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.save_bail_police" divided>修改办案人</el-dropdown-item>
                  <el-dropdown-item @click="downClick(9,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.save_crime_info" divided>完善当事人信息</el-dropdown-item>
                  <el-dropdown-item @click="downClick(10,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.revoke_qrcode" divided>撤销缴费申请</el-dropdown-item>
                  <el-dropdown-item @click="downClick(3,scope.row.id,scope.row.bail_id)" v-if="anniuStatus.close_bail" divided>
                    <el-button style="width:100%" type="primary">关闭本案</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination :page-size="params.pagesize" :size="params.page" layout="total, prev, pager, next" :total="total"
          @current-change="handleCurrentChange" />
      </div>
    </div>

    <!-- 编辑或新增页 -->
    <el-drawer v-if="dialog" size="46%" v-model="dialog" :with-header="false">
      <form-model @ewmOk="ewmSc" :bailId="id" :mdl="mdl" :parent-id="parentId" :handle-close-drawer="handleCloseDialog" @getList="getList" />
    </el-drawer>

    <!-- 查看异常 -->
    <el-dialog v-model="warningVisible" width="500" center>
      <div class="warning_box">
        <p class="icon"><el-icon><WarningFilled /></el-icon></p>
        <p class="tips">提示</p>
        <p class="text">本案未完成缴费</p>
        <div class="footer">
          <el-button @click="warningVisible = false">我再想想</el-button>
          <el-button type="primary">立即缴费</el-button>
        </div>
      </div>
    </el-dialog>

   

    <!-- 二维码 -->
    <el-dialog v-if="ewmVisible" title="" v-model="ewmVisible" width="1150">
      <scan-ewm :ewmUrl="ewmUrl" :ewmInfo="ewmInfo"></scan-ewm>
    </el-dialog>

    <!-- 完善办案日期 -->
    <el-dialog :show-close="false" v-model="updateDateShow">
      <update-bail-date :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 案件延期申请 -->
    <el-dialog :show-close="false" v-model="updateDelayShow">
      <update-bail-delay :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 修改办案预留银行卡 -->
    <el-dialog v-model="updateBankShow" :show-close="false">
      <update-bank :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 委托协办单位 -->
    <el-dialog v-model="updateEntrustShow" :show-close="false">
      <update-entrust :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 修改办案人 -->
    <el-dialog v-model="updatePoliceShow" :show-close="false">
      <update-police :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 修改办案单位 -->
    <el-dialog v-model="updateUnitShow" :show-close="false">
      <update-unit :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>

    <!-- 完善当事人信息 -->
    <el-dialog v-model="updateUser" :show-close="false">
      <update-user :bailId="bailId" :id="id" @closeDrawer="closeDrawer"/>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref,onMounted } from "vue";
import { ElNotification, ElMessageBox } from 'element-plus'
import FormModel from "./components/FormModel.vue";
import UpdateBailDate from "./components/UpdateBailDate.vue";
import UpdateBailDelay from "./components/UpdateBailDelay.vue";
import UpdateBank from "./components/UpdateBank.vue";
import UpdateEntrust from "./components/UpdateEntrust.vue";
import UpdatePolice from "./components/UpdatePolice.vue";
import UpdateUnit from "./components/UpdateUnit.vue";
import UpdateUser from "./components/UpdateUser.vue";

import ScanEwm from "./components/ScanEwm.vue";
import { useRouter, useRoute } from "vue-router";
import { ElLoading } from 'element-plus'

import { getPlayList,getPlayMore,closeBail,getQrCode,addJkb,qrcodeView,revokeQrcode } from "@/api/bond/pay";

import { getPublic,getDepartmentList } from "@/api/public";
import { fa } from "element-plus/es/locale";

const router = useRouter();

// 参数
let params = ref({
    crime_name: '',// 嫌疑人名称
    case_code: '',// 案件编号
    min_amount:'',// 最小金额
    max_amount:'',// 最大金额
    keyword:'',// 关键词
    status:'',// 状态
    department_id:'',// 办案单位
    start_time:'',// 起算日期
    end_time:'',// 解除日期
    page:1,
    pagesize:10
});

// 搜索参数
let searchOptions = ref(
  [
  { label: "案件编号：", type: "input", prop: "case_code", placeholder: "请输入" },
  {
    label: "保证金金额：",
    type: "input-range",
    prop: "min_amount",
    prop1: "max_amount",
    placeholder: "请输入",
  },
  {
    label: "保证金缴费状态：",
    type: "select",
    prop: "status",
    placeholder: "请选择",
    options:[],
  },
  {
    label: "嫌疑人姓名：",
    type: "input",
    prop: "crime_name",
    placeholder: "请输入",
  },
  {
    label: "办案单位：",
    type: "cascader",
    prop: "department_id",
    placeholder: "请选择",
    options:[],
  },
  {
    label: "案件起始时间：",
    type: "date-range",
    prop: "name7",
    placeholder: "请选择",
    // options:agentOptions.value,
  },
]
)


let loading = ref(false)
let tableData = reactive([]);// 表格数据
let total = ref(0)// 总条数
let unpay_count = ref(0)// 待缴费条数
let pay_count = ref(0) // 已缴费条数

onMounted(() => {

  getList(false,null)

  getPublicSource()

  getBumenList()
});

// 生成二维码
let ewmVisible = ref(false)
let ewmInfo = ref({})
let ewmUrl = ref('')
const generateEwm = async(id: any) =>{
  const loading = ElLoading.service({
    lock: true,
    text: '生成中,请稍等...',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  await getQrCode({process_id:id}).then(res=>{
    if(res.code == 1){
      ewmUrl.value = res.data.qrcode
    }else{
      loading.close()
      ElNotification.error(res.msg)
    }
  })
  if(ewmUrl.value){
    // await addJkb({process_id:bailInfo.value.id}).then(res=>{
    //   if(res.code == 1){
        
    //     loading.close()
    //   }else{
    //     loading.close()
    //     ElNotification.error(res.msg)
    //   }
    // })
    await qrcodeView({process_id:id}).then(res=>{
      if(res.code == 1){
        ewmInfo.value = res.data
        ewmVisible.value = true
        loading.close()
        getList(false,null)
      }else{
        loading.close()
        ElNotification.error(res.msg)
      }
    })
  }
}

const ewmSc = (id: any)=>{
  dialog.value = false
  generateEwm(id)
}

// 获取公共数据
const getPublicSource = async()=>{
  await getPublic().then(res=>{
    if(res.code == 1){
      searchOptions.value[2].options = res.data.agent
    }
  })
}

// 获取部门
const getBumenList = async()=>{
  await getDepartmentList().then(res=>{
    if(res.code == 1){
      res.data = JSON.parse(JSON.stringify(res.data).replace(/department_id/g,'value'))
      res.data = JSON.parse(JSON.stringify(res.data).replace(/name/g,'label'))
      res.data = JSON.parse(
        JSON.stringify(res.data).replace(/child/g, "children")
      );
      searchOptions.value[4].options = res.data
    }
  })
}

// 更多按钮-操作
let anniuStatus = ref({})// 按钮对象
const openButton = async(scope: { id: any; })=>{
  getPlayMore({process_id:scope.id}).then(res=>{
    if(res.code == 1){
      anniuStatus.value = res.data
    }
  })
}

// 关闭弹窗
const closeDrawer=()=>{
  updateDateShow.value = false
  updateDelayShow.value = false
  updateBankShow.value = false
  updateEntrustShow.value = false
  updatePoliceShow.value = false
  updateUnitShow.value = false
  updateUser.value = false
}

// 按钮点击
let id = ref(0) // 主表id
let bailId = ref(0) // 案件id
let updateDateShow = ref(false) // 完善办案日期弹窗
let updateDelayShow = ref(false) // 案件延期申请弹窗
let updateBankShow = ref(false) // 修改办案预留银行卡
let updateEntrustShow = ref(false) // 委托协办单位
let updatePoliceShow = ref(false) // 修改办案人
let updateUnitShow = ref(false) // 修改办案单位
let updateUser = ref(false) // 完善当事人信息

const downClick = (num: number,eId: number,aId: number)=>{
  id.value = eId
  bailId.value = aId
  if(num == 1){ //案件延期申请
    updateDelayShow.value = true
  }
  if(num == 7){ //修改办案单位
    updateUnitShow.value = true
  }
  if(num == 4){ //修改办案日期
    updateDateShow.value = true
  }
  if(num == 5){ //委托协办单位
    updateEntrustShow.value = true
  }
  if(num == 8){ //修改办案人
    updatePoliceShow.value = true
  }
  if(num == 9){ //完善当事人信息
    updateUser.value = true
  }
  if(num == 6){ //修改办案预留银行卡
    updateBankShow.value = true
  }
  if(num == 3){// 关闭本案
    ElMessageBox.confirm(
    '确定要关闭本案?',
    '提示',
    {
      confirmButtonText: '确认关闭',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      closeBail({bail_id:id}).then(res=>{
        if(res.code == 1){
          ElNotification({ message:res.msg, type: "success" });
          getList(false,null)
        }else{
          ElNotification.error(res.msg);
        }
      })
    })
    .catch(() => {
    })
  }

  if(num == 10){// 撤销缴费申请
    ElMessageBox.confirm(
    '确定要撤销缴费申请?',
    '提示',
    {
      confirmButtonText: '确认撤销',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      revokeQrcode({process_id:eId}).then(res=>{
        if(res.code == 1){
          ElNotification({ message:res.msg, type: "success" });
          getList(false,null)
        }else{
          ElNotification.error(res.msg);
        }
      })
    })
    .catch(() => {
    })
  }
}


// 栏目切换
let tabList = ref(
  [
    {name:'全部',status:''},
    {name:'待缴费',status:'0'},
    {name:'已缴费',status:'1'}
  ]
)
let tabListIndex = ref(0)
let activeName = ref('first0') // 切换的值

const handleClick = (e: { index: any; })=>{
  console.log(e.index)
  let index = e.index
  tabListIndex.value = index
  params.value.status = tabList.value[index].status
  getList(false,null)
}

// 列表
const getList = async(status,obj) =>{
  loading.value = true
  let data = {}
  if(status){
    data = obj
  }else{
    data = params.value
  }
  await getPlayList(data).then(res=>{
    if(res.code == 1){
      tableData = res.data.rows
      total.value = res.data.total
      unpay_count.value = res.data.unpay_count
      pay_count.value = res.data.pay_count
      loading.value = false
    }else{
      loading.value = false
    }
  })
}

// 表单搜索
const onSearch = (searchData: {name7: string | any[]; }) => {
  params.value = Object.assign({},searchData)
  let obj = Object.assign({}, params.value);
  if(obj.department_id.length){
    obj.department_id = `` + obj.department_id.at(-1);
  }
  console.log(obj)
  if(searchData.name7 && searchData.name7.length){
    params.value.start_time = searchData.name7[0]
    params.value.end_time = searchData.name7[1]
    delete params.value.name7;
  }
  
  getList(true,obj)
};

// 表单重置
const onReset = () => { 
  getList(false,null)
};

/*
 * 弹窗
 */
// 参数
let dialog = ref(false);
let mdl = reactive({});
let parentId = ref<Number>(0);

// 打开弹窗
const openJf = (e: number) => {
  dialog.value = true;
  id.value = e
};

// 关闭dialog方法
const handleCloseDialog = () => {
  dialog.value = false;
};

/*
 * 查看
 */
const toSee = (id: any) => {
  router.push({ name: "BondPaySee", params: { id } });
};


// 查看异常
let warningVisible = ref<boolean>(false);
const warningClick = () => {
  warningVisible.value = true;
};



// 复制编号
const copyCode = (code: string)=>{
  navigator.clipboard.writeText(code);
  ElNotification({ message:'已复制该编号', type: "success" });
}

// 分页
const handleCurrentChange = (e: any)=>{
  params.value.page = e
  getList(false,null)
}

</script>

<style lang="scss" scoped>
.ces_box{
  width: 99.85%;
  position: absolute;
  left:1px;
  top:0;
  display: flex;
  justify-content: space-between;
  z-index: 10;
  font-weight: 400;
  height: 57px;
  align-items: center;
  border-radius: 8px 8px 0px 0px;
  background: #F2F4F7;
  .up_day{
    margin-right:13px;
    font-size: 14px;
    color: #999999;
  }
}
.ces_box .code{
  display: flex;
  margin-left:24px;
  font-size: 14px;
  color: #333333;
  p{
    margin-right:46px;
    display: flex;
    align-items: center;
    img{
      width: 15px;
      height: 15px;
      margin-left: 6px;
      cursor: pointer;
    }
  }
}
::v-deep .el-table .el-table__cell{
  position: initial;
}
::v-deep .el-table__body tr{
  position: relative;
  overflow: hidden;
}
.el-table {
  // --el-table-row-hover-bg-color: #1C55D1
}
.warning_box{
  .icon{
    color:#FF0000;
    text-align: center;
    font-size:40px;
  }
  .tips{
    font-size: 18px;
    color: #333333;
    text-align: center;
    margin-top:8px;
  }
  .text{
    font-size: 18px;
    color: #666666;
    text-align: center;
    margin:23px 0 60px 0;
  }
  .footer{
    text-align: center;
  }
}
</style>